<div class="container class-usage">

    <div class="block-header">
        <h2>Commonly Classes</h2>

    </div>


    <div class="row">
        <div class="col-md-4">

            <md-card class="m-b-30">
                <md-card-header>
                    <md-card-header-text>
                        <span class="md-title">Margin</span>
                    <span class="md-subhead">
                        Markup: &lt;div class=&quot;m-0&quot;&gt;&lt;/div&gt;
                    </span>

                    </md-card-header-text>
                </md-card-header>
                <md-card-content>


                    <strong class="d-block">Margin</strong>

                    <code>.m-0</code>
                    <code>.m-5</code>
                    <code>.m-10</code>
                    <code>.m-15</code>
                    <code>.m-20</code>
                    <code>.m-25</code>

                    <br>
                    <br>

                    <strong class="d-block">Margin Top</strong>

                    <code>.m-t-0</code>
                    <code>.m-t-5</code>
                    <code>.m-t-10</code>
                    <code>.m-t-15</code>
                    <code>.m-t-20</code>
                    <code>.m-t-25</code>

                    <br>
                    <br>

                    <strong class="d-block">Margin Right</strong>

                    <code>.m-r-0</code>
                    <code>.m-r-5</code>
                    <code>.m-r-10</code>
                    <code>.m-r-15</code>
                    <code>.m-r-20</code>
                    <code>.m-r-25</code>

                    <br>
                    <br>

                    <strong class="d-block">Margin Bottom</strong>

                    <code>.m-b-0</code>
                    <code>.m-b-5</code>
                    <code>.m-b-10</code>
                    <code>.m-b-15</code>
                    <code>.m-b-20</code>
                    <code>.m-b-25</code>

                    <br>
                    <br>

                    <strong class="d-block">Margin Left</strong>

                    <code>.m-l-0</code>
                    <code>.m-l-5</code>
                    <code>.m-l-10</code>
                    <code>.m-l-15</code>
                    <code>.m-l-20</code>
                    <code>.m-l-25</code>


                </md-card-content>
            </md-card>

        </div>


        <div class="col-md-4">

            <md-card class="m-b-30">
                <md-card-header>
                    <md-card-header-text>
                        <span class="md-title">Padding</span>
                    <span class="md-subhead">
                        Markup: &lt;div class=&quot;p-0&quot;&gt;&lt;/div&gt;
                    </span>

                    </md-card-header-text>
                </md-card-header>
                <md-card-content>


                    <strong class="d-block">Padding</strong>

                    <code>.p-0</code>
                    <code>.p-5</code>
                    <code>.p-10</code>
                    <code>.p-15</code>
                    <code>.p-20</code>
                    <code>.p-25</code>

                    <br>
                    <br>

                    <strong class="d-block">Padding Top</strong>

                    <code>.p-t-0</code>
                    <code>.p-t-5</code>
                    <code>.p-t-10</code>
                    <code>.p-t-15</code>
                    <code>.p-t-20</code>
                    <code>.p-t-25</code>

                    <br>
                    <br>

                    <strong class="d-block">Padding Right</strong>

                    <code>.p-r-0</code>
                    <code>.p-r-5</code>
                    <code>.p-r-10</code>
                    <code>.p-r-15</code>
                    <code>.p-r-20</code>
                    <code>.p-r-25</code>

                    <br>
                    <br>

                    <strong class="d-block">Padding Bottom</strong>

                    <code>.p-b-0</code>
                    <code>.p-b-5</code>
                    <code>.p-b-10</code>
                    <code>.p-b-15</code>
                    <code>.p-b-20</code>
                    <code>.p-b-25</code>

                    <br>
                    <br>

                    <strong class="d-block">Padding Left</strong>

                    <code>.p-l-0</code>
                    <code>.p-l-5</code>
                    <code>.p-l-10</code>
                    <code>.p-l-15</code>
                    <code>.p-l-20</code>
                    <code>.p-l-25</code>


                </md-card-content>
            </md-card>

        </div>


        <div class="col-md-4">

            <md-card class="m-b-30">
                <md-card-header>
                    <md-card-header-text>
                        <span class="md-title">Material Background Color</span>
                    <span class="md-subhead">
                        Markup: &lt;any class=&quot;bgc-red&quot;&gt;Material Color Palette&lt;/any&gt;
                    </span>

                    </md-card-header-text>
                </md-card-header>
                <md-card-content>


                    <code>.bgc-red</code>
                    <code>.bgc-pink</code>
                    <code>.bgc-purple</code>
                    <code>.bgc-deeppurple</code>
                    <code>.bgc-indigo</code>
                    <code>.bgc-blue</code>
                    <code>.bgc-lightblue</code>
                    <code>.bgc-cyan</code>
                    <code>.bgc-teal</code>
                    <code>.bgc-green</code>
                    <code>.bgc-lightgreen</code>
                    <code>.bgc-lime</code>
                    <code>.bgc-yellow</code>
                    <code>.bgc-amber</code>
                    <code>.bgc-orange</code>
                    <code>.bgc-deeporange</code>
                    <code>.bgc-brown</code>
                    <code>.bgc-grey</code>
                    <code>.bgc-bluegrey</code>
                    <code>.bgc-black</code>
                    <code>.bgc-white</code>


                </md-card-content>
            </md-card>

        </div>

        <div class="clearfix"></div>


        <div class="col-md-4">

            <md-card class="m-b-30">
                <md-card-header>
                    <md-card-header-text>
                        <span class="md-title">Material Font Color</span>
                                    <span class="md-subhead">
                                        Markup: &lt;any class=&quot;c-white&quot;&gt;Material Color Palette&lt;/any&gt;
                                    </span>

                    </md-card-header-text>
                </md-card-header>
                <md-card-content>

                    <code>.c-red</code>
                    <code>.c-pink</code>
                    <code>.c-purple</code>
                    <code>.c-deeppurple</code>
                    <code>.c-indigo</code>
                    <code>.c-blue</code>
                    <code>.c-lightblue</code>
                    <code>.c-cyan</code>
                    <code>.c-teal</code>
                    <code>.c-green</code>
                    <code>.c-lightgreen</code>
                    <code>.c-lime</code>
                    <code>.c-yellow</code>
                    <code>.c-amber</code>
                    <code>.c-orange</code>
                    <code>.c-deeporange</code>
                    <code>.c-brown</code>
                    <code>.c-grey</code>
                    <code>.c-bluegrey</code>
                    <code>.c-black</code>
                    <code>.c-white</code>


                </md-card-content>
            </md-card>

        </div>

        <div class="col-md-4">

            <md-card class="m-b-30">
                <md-card-header>
                    <md-card-header-text>
                        <span class="md-title">Font Size</span>
                                    <span class="md-subhead">
                                        Markup: &lt;div class=&quot;f-10&quot;&gt;&lt;div&gt;
                                    </span>

                    </md-card-header-text>
                </md-card-header>
                <md-card-content>

                    <code>.f-8</code>
                    <code>.f-9</code>
                    <code>.f-10</code>
                    <code>.f-11</code>
                    <code>.f-12</code>
                    <code>.f-13</code>
                    <code>.f-14</code>
                    <code>.f-15</code>
                    <code>.f-16</code>
                    <code>.f-17</code>
                    <code>.f-18</code>
                    <code>.f-19</code>
                    <code>.f-20</code>
                    <code>.f-21</code>
                    <code>.f-22</code>
                    <code>.f-23</code>
                    <code>.f-24</code>
                    <code>.f-25</code>
                    <code>.f-26</code>
                    <code>.f-27</code>
                    <code>.f-28</code>
                    <code>.f-29</code>
                    <code>.f-30</code>


                </md-card-content>
            </md-card>

        </div>
        <div class="col-md-4">

            <md-card class="m-b-30">
                <md-card-header>
                    <md-card-header-text>
                        <span class="md-title">Others</span>
                    </md-card-header-text>
                </md-card-header>
                <md-card-content>

                    <code>.clearfix
                        <md-tooltip>clear both</md-tooltip>
                    </code>
                    <code>.pull-right</code>
                    <code>.pull-left</code>
                    <code>.d-block</code>
                    <code>.di-block
                        <md-tooltip>display:inline-block</md-tooltip>
                    </code>
                    <code>.text-left</code>
                    <code>.text-center</code>
                    <code>.text-right</code>
                    <code>.show</code>
                    <code>.hidden</code>
                    <br>
                    <br>
                    <code>.visible-xs-block</code>
                    <code>.visible-xs-inline</code>
                    <code>.visible-xs-inline-block</code>
                    <code>.visible-sm-block</code>
                    <code>.visible-sm-inline</code>
                    <code>.visible-sm-inline-block</code>
                    <code>.visible-md-block</code>
                    <code>.visible-md-inline</code>
                    <code>.visible-md-inline-block</code>
                    <code>.visible-lg-block</code>
                    <code>.visible-lg-inline</code>
                    <code>.visible-lg-inline-block</code>
                    <br>
                    <br>
                    <code>.hidden-xs</code>
                    <code>.hidden-md</code>
                    <code>.hidden-xs</code>
                    <code>.hidden-sm</code>
                    <code>.hidden-lg</code>


                </md-card-content>
            </md-card>

        </div>

        <div class="clearfix"></div>

        <div class="col-md-4">

            <md-card class="m-b-30">
                <md-card-header>
                    <md-card-header-text>
                        <span class="md-title">Angularjs Directives</span>
                    </md-card-header-text>
                </md-card-header>
                <md-card-content>

                    <code>md-ink-ripple="#333"</code>
                    <code>bs-popover</code>
                    <code>md-no-float
                        <md-tooltip>use for input no float label</md-tooltip>
                    </code>


                </md-card-content>
            </md-card>

        </div>


    </div>


</div>
